<template>
  <div class="content">
    <div class="search">
      <el-form :inline="true" :model="orderParams" class="demo-form-inline">
        <el-form-item label="名称:">
          <el-select
            style="width: 160px"
            clearable
            v-model="orderParams.groupId"
            placeholder="请选择"
            @change="getStagList"
          >
            <el-option
              v-for="(item, index) in ptGoodsList"
              :key="index"
              :label="item.group.title"
              :value="item.group.groupId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="期:">
          <el-select
            style="width: 160px"
            clearable
            v-model="orderParams.periodNo"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in stagList"
              :key="index"
              :label="item.periodNo"
              :value="item.periodNo"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getOrderListPt">查询</el-button>
        </el-form-item>
        <el-form-item>
          <div style="font-size: 18px">
            订单总量：
            <span style="font-weight: bold">{{ tableData.length || 0 }}</span>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="table orderTable">
      <el-table
        :data="tableData"
        height="100%"
        :header-cell-style="{ color: '#000' }"
        border
        empty-text="暂无数据"
        style="width: 100%"
      >
        <el-table-column type="index" width="100" align="center" label="序号" />
        <el-table-column label="名称" align="center" prop="goodsName" />
        <el-table-column label="期" align="center" prop="periodNo" />
        <el-table-column label="餐品id" align="center" prop="goodsId" />
        <el-table-column label="取货地址" align="center" prop="cabinetAddress" />
        <el-table-column prop="orderNo" align="center" label="订单号" />
        <el-table-column prop="phonenumber" align="center" label="手机号">
          <template #default="scope">
            {{ scope.row.phonenumber }}
            <el-icon
              v-if="scope.row.phonenumber"
              style="margin-left: 4px; cursor: pointer"
              @click="clickCopy(scope.row.phonenumber)"
              ><DocumentCopy
            /></el-icon>
          </template>
        </el-table-column>
        <el-table-column prop="cabinetPickupCode" align="center" label="取餐码">
          <template #default="scope">
            {{ scope.row.cabinetPickupCode }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" align="center" label="订单时间" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, computed } from "vue";
import { getPtList } from '@/api/home.js'

const props = defineProps({
  dataList: {
    type: Array,
    default: [],
  },
  ptGoodsList: {
    type: Array,
    default: [],
  },
});
const orderParams = ref({});
const stagList = ref([]);
const tableData = ref(props.dataList);


const previewImage = (url) => {};
const getStagList = (e) => {
  stagList.value = []
  let arr = props.ptGoodsList.find((item) => {
    return item.group.groupId == e;
  });
  stagList.value = arr.groupInstances;
}
const getOrderListPt = ()=>{
  tableData.value = []
  getPtList(orderParams.value).then(res => {
    if (res.code==0) {
      tableData.value = res.data
    }
  })
}

</script>

<style lang="less" scoped>
.imgs {
  display: flex;
  flex-wrap: wrap;
  img {
    margin-right: 10px;
  }
}
</style>